<template>
	<view class="index-page">
		<view class="main">
			<view class="banner"></view>
			<view class="title">
				手机租赁
			</view>
			<view class="search" @click="goSearch">
				<u-search searchIconColor="#fbd748" placeholder="苹果16Pro Max" v-model="searchText" height="40"
					:showAction="false"></u-search>
			</view>
			<view class="announcement">
				<u-notice-bar :text="announcementText[0]" direction="column" color='black'
					bgColor="rgba(255,255,255,0.5)" speed='1' :step="true" fontSize="13px"></u-notice-bar>
			</view>
			<view class="swiperBox">
				<swiperVue></swiperVue>
			</view>
			<view class="grid">
				<gridVue></gridVue>
			</view>
			<view class="boxc_one">
				<view class="textBox">
					<view class="icon" style="background-image: url('/static/index/box1.png');"></view>
					<view class="text">
						租赁信赖平台
					</view>
				</view>
				<view class="dian">·</view>
				<view class="textBox">
					<view class="icon" style="background-image: url('/static/index/box2.png');"></view>
					<view class="text">
						安心租保障
					</view>
				</view>
				<view class="dian">·</view>
				<view class="textBox">
					<view class="icon" style="background-image: url('/static/index/box3.png');"></view>
					<view class="text">
						国行正品售后无忧
					</view>
				</view>
			</view>
			<view class="ads_one"></view>
			<view class="ads_two">
				<view class="ads_two1">
					<view class="p1">
						新品上市
					</view>
					<view class="p2">
						iPhone16 Pro 免租30天
					</view>
				</view>
				<view class="box">
					<view class="ads_two2">
						<view class="p1">国货专区</view>
						<view class="p2">华为mate70</view>
						<view class="p3">￥3.90/天</view>
					</view>
					<view class="ads_two3">
						<view class="p1">爆款推荐</view>
						<view class="p2">最高省2888</view>
						<view class="p3">5折起租 ></view>
					</view>
				</view>
			</view>
			<view class="hot-rent-list">
				<hotRentListVue :hotList="hotList"></hotRentListVue>
			</view>
			<view class="ads_three"></view>

			<view class="phoneList">
				<view class="tab">
					<view class="tab-item" v-for="(item,index) in tabList" :key="index" @click="changeTab(item,index)">
						<view :class="tabActiveIndex==index?'text activeText':'text'">
							{{item.text}}
						</view>
						<view :class="tabActiveIndex==index?'icon activeIcon':'icon'"></view>
					</view>
				</view>
				<indexPhoneListVue :tabActiveList="tabActiveList"></indexPhoneListVue>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		NOTICE,
		Page
	} from "../../api/api.js"
	import swiperVue from '../../common/index/swiper.vue';
	import gridVue from '../../common/index/grid.vue';
	import hotRentListVue from '../../common/index/hot-rent-list.vue';
	import indexPhoneListVue from "../../common/index/indexPhoneList.vue";
	export default {
		data() {
			return {
				// 公告
				announcementText: [],
				//搜索
				searchText: "",
				//热租榜单
				hotList: [],
				//tab
				tabList: [{
					id: 1,
					text: "热门精选"
				}, {
					id: 2,
					text: "租享生活"
				}, {
					id: 3,
					text: "苹果手机"
				}, {
					id: 4,
					text: "安卓手机"
				}],
				//tab选中下标
				tabActiveIndex: 0,
				// tab总数据
				tabAllList: [],
				//tab选中数据
				tabActiveList: []
			}
		},
		components: {
			swiperVue,
			gridVue,
			hotRentListVue,
			indexPhoneListVue
		},
		mounted() {
			this.notices()
			this.onpages()
			this.zhifubao()
		},
		methods: {
			zhifubao(){
				uni.getProvider({
					service: 'oauth',
					success: function (res) {
					  console.log(res)
					}
				})
			},
			// alipayLogin() {
			// 	my.getAuthCode({
			// 		scopes: 'auth_user',
			// 		success: (res) => {
			// 			if (res.authCode) {
			// 				// 获取授权码成功，调用后端接口进行登录
			// 				this.loginWithAuthCode(res.authCode);
			// 			}
			// 		},
			// 		fail: (err) => {
			// 			// 处理获取授权码失败的情况
			// 			console.error('获取授权码失败：', err);
			// 		}
			// 	});
			// },
			// 调用后端接口，使用授权码进行登录
			// loginWithAuthCode(authCode) {
			// 	uni.request({
			// 		url: 'https://api.jingkakeji.com/', // 后端接口的URL
			// 		method: 'POST',
			// 		data: {
			// 			authCode: authCode
			// 		},
			// 		success: (res) => {
			// 			if (res.data.success) {
			// 				// 登录成功，处理成功逻辑
			// 				uni.setStorageSync('userToken', res.data.token);
			// 				uni.showToast({
			// 					title: '登录成功',
			// 					icon: 'success'
			// 				});
			// 			} else {
			// 				// 登录失败，处理失败逻辑
			// 				uni.showToast({
			// 					title: '登录失败',
			// 					icon: 'none'
			// 				});
			// 			}
			// 		},
			// 		fail: (err) => {
			// 			// 处理接口调用失败的情况
			// 			console.error('接口调用失败：', err);
			// 			uni.showToast({
			// 				title: '登录失败',
			// 				icon: 'none'
			// 			});
			// 		}
			// 	});
			// },

			//商品列表
			async onpages() {
				let res = await Page()
				if (res.data.code == 1) {
					this.hotList = res.data.data.hot
					this.tabAllList = res.data.data
					//默认的tab数据
					this.tabActiveList = this.tabAllList.hot
				}
			},
			//公告
			async notices() {
				let res = await NOTICE()
				this.announcementText = [
					res.data.data.map(item => item.content)
				];
			},
			//去搜索
			goSearch() {
				uni.navigateTo({
					url: "/pages/classify/Search/Search"
				})
			},
			//tab切换
			changeTab(item, index) {
				this.tabActiveIndex = index
				if (item.id == 1) {
					this.tabActiveList = this.tabAllList.hot
				}
				if (item.id == 2) {
					this.tabActiveList = this.tabAllList.recommend
				}
				if (item.id == 3) {
					this.tabActiveList = this.tabAllList.apple
				}
				if (item.id == 4) {
					this.tabActiveList = this.tabAllList.android
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.index-page {
		width: 100vw;
		height: calc(100vh - 100rpx);
		overflow-y: scroll;
		background-color: #f6f6f6;

		.main {
			width: 100%;
			height: auto;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow-y: scroll;
			padding-bottom: 10rpx;

			.banner {
				width: 100%;
				height: 800rpx;
				background-image: url("/static/index/banner.png");
				background-size: cover;
				z-index: 1;
				position: absolute;
			}

			.title {
				width: 95%;
				height: 70rpx;
				line-height: 70rpx;
				font-weight: bold;
				font-size: 40rpx;
				margin-top: 80rpx;
				z-index: 2;
			}

			.search {
				width: 95%;
				height: 80rpx;
				margin-top: 20rpx;
				z-index: 2;
			}

			.announcement {
				width: 95%;
				height: 70rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
				overflow: hidden;
				z-index: 2;
			}

			.swiperBox {
				width: 95%;
				height: 320rpx;
				// background-color: red;
				margin-top: 20rpx;
				border-radius: 20rpx;
				z-index: 2;
			}

			.grid {
				width: 95%;
				// height: 400rpx;
				background-color: white;
				border-radius: 20rpx;
				margin-top: 20rpx;
				z-index: 2;
			}

			.boxc_one {
				width: 90%;
				height: 50rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #b4b4b4;

				.textBox {
					display: flex;
					align-items: center;

					.icon {
						width: 25rpx;
						height: 25rpx;
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
					}
				}
			}

			.ads_one {
				width: 95%;
				height: 180rpx;
				margin-top: 20rpx;
				background-image: url("/static/index/ads_one.png");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}

			.ads_two {
				width: 95%;
				height: 390rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;

				.ads_two1 {
					width: 330rpx;
					height: 100%;
					border-radius: 20rpx;
					background-image: url("/static/index/ads_two1.png");
					background-size: cover;

					.p1 {
						text-align: center;
						font-size: 34rpx;
						font-weight: bold;
						margin-top: 20rpx;
					}

					.p2 {
						text-align: center;
						font-size: 24rpx;
						margin-top: 20rpx;
					}
				}

				.box {
					width: calc(100% - 350rpx);
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.ads_two2 {
						width: 100%;
						height: 180rpx;
						background-image: url("/static/index/ads_two2.png");
						background-size: cover;
						border-radius: 20rpx;

						.p1 {
							text-indent: 20rpx;
							font-size: 34rpx;
							font-weight: bold;
							margin-top: 20rpx;
						}

						.p2 {
							text-indent: 20rpx;
							font-size: 24rpx;
							margin-top: 10rpx;
						}

						.p3 {
							width: 120rpx;
							height: 35rpx;
							text-align: center;
							line-height: 35rpx;
							border: 1px solid #4b4b4b;
							font-size: 24rpx;
							margin-top: 15rpx;
							border-radius: 10rpx;
							margin-left: 20rpx;
						}
					}

					.ads_two3 {
						width: 100%;
						height: 180rpx;
						background-color: seagreen;
						background-image: url("/static/index/ads_two3.png");
						background-size: cover;
						border-radius: 20rpx;

						.p1 {
							text-indent: 20rpx;
							font-size: 34rpx;
							font-weight: bold;
							margin-top: 20rpx;
						}

						.p2 {
							text-indent: 20rpx;
							font-size: 24rpx;
							margin-top: 10rpx;
						}

						.p3 {
							width: 120rpx;
							height: 35rpx;
							text-align: center;
							line-height: 35rpx;
							border: 1px solid #4b4b4b;
							font-size: 24rpx;
							margin-top: 15rpx;
							border-radius: 10rpx;
							margin-left: 20rpx;
						}
					}
				}
			}

			.hot-rent-list {
				width: 95%;
				height: 500rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
				overflow: hidden;
				background-color: white;
			}

			.ads_three {
				width: 95%;
				height: 180rpx;
				margin-top: 20rpx;
				background-image: url("/static/index/ads_three.png");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}



			.phoneList {
				width: 95%;
				margin-top: 30rpx;

				.tab {
					width: 100%;
					height: 80rpx;
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;

					.tab-item {
						width: 150rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;

						.text {
							font-size: 28rpx;
							color: #4b4b4b;
							font-weight: bold;
						}

						.activeText {
							color: black;
							font-weight: bold;
							font-size: 32rpx;
						}

						.icon {
							width: 50rpx;
							height: 20rpx;
						}

						.activeIcon {
							background-image: url("/static/index/tabActive.png");
							background-size: cover;
						}
					}
				}
			}
		}
	}
</style>